<template>
  <div class="default-main ba-table-box">
    <!-- 表格顶部菜单 -->
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" @action="baTable.onTableAction" />
    <!-- 日志详情展示 -->
    <Info />
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { ref, provide, onMounted, markRaw } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import { DeviceMOperWork } from "@/api/backend/index";
import useCurrentInstance from "@/utils/useCurrentInstance";
import TableHeader from "@/components/table/header/index.vue";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import Info from "./info.vue";
import { useRoute } from "vue-router";
import { useNavTabs } from "@/store/navTabs";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const navTabs = useNavTabs();
const { proxy } = useCurrentInstance(); //全局事件总线

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};

// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + DeviceMOperWork)
      ? (navTabs as any).pageSizeMap.get(route.path + DeviceMOperWork)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(DeviceMOperWork), //this.api = api部门管理
  {
    pk: "id",
    column: [
      { type: "selection", align: "center", operator: false },
      // {
      //   label: "设备id",
      //   prop: "eid",
      //   align: "center",
      //   operator: false,
      //   operatorPlaceholder: "模糊搜索",
      //   width: 70,
      // },
      {
        show: filedShowOff("ecode"),
        label: "设备编号",
        prop: "ecode",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("cname"),
        label: "企业名称",
        prop: "cname",
        align: "center",
      },
      {
        show: filedShowOff("gatewaycode"),
        label: "网关编号",
        prop: "gatewaycode",
        align: "center",
      },
      {
        show: filedShowOff("event"),
        label: "事件名称",
        prop: "event",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("eventValue"),
        label: "事件值",
        prop: "eventValue",
        align: "center",
        operator: false,
        width: 160,
      },
      {
        show: filedShowOff("type"),
        label: "操作事件",
        prop: "type",
        align: "center",
        render: "tag",
        width: 120,
        custom: { 0: "success", 1: "info", 2: "warning", 3: "danger" },
        replaceValue: {
          0: "关机",
          1: "开机",
          2: "更换滤芯",
          3: "告警",
        },
      },
      // {
      //   label: "IP",
      //   prop: "ip",
      //   align: "center",
      //   operator: false,
      //   operatorPlaceholder: "模糊搜索",
      //   render: "tag",
      // },
      {
        show: filedShowOff("eventTime"),
        label: "事件时间",
        prop: "eventTime",
        align: "center",
        render: "datetime",
        // operator: "RANGE",
        operator: false,
      },
      {
        show: operatorShowOff([route.path + "/edit", route.path + "/remove"]),
        label: "操作",
        align: "center",
        width: "100",
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "info",
            title: "设备详情",
            text: "",
            type: "primary",
            icon: "iconfont icon-chaxunyujisuan",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "confirmButton",
            name: "remove",
            title: "删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "删除",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确定删除所选项吗",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
    },
  }
);

/** 点击查看详情按钮响应 */
const infoButtonClick = (row: TableRow) => {
  if (!row) return;
  // 数据来自表格数据,未重新请求api,深克隆,不然可能会影响表格
  let rowClone = _.cloneDeep(row);
  baTable.form.extend!["info"] = rowClone;
  baTable.form.operate = "info";
};

onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(DeviceMOperWork); //暂时使用系统管理日志数据

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      //点击打开处理表单
      console.log("data.name", data.name);
      if (data.name == "info") {
        infoButtonClick(data.row);
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
s
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
</style>
